<script setup lang="ts">
import {useRoute} from "vue-router";
import {ref} from "vue";

// const route = useRoute();
// const id = ref(route.params.id);
defineProps({
  id: String
});


</script>

<template>
  <el-card header="将props传递给路由组件" class="mb-4">
    <p>在你的组件中使用 <code>$route</code> 或 <code>useRoute() </code> 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的
      URL。虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为</p>
    <p>id：{{ id }}</p>
  </el-card>
  <p>第一步：我们可以通过声明 prop 来在 <code>RouterProps.vue</code> 中删除对<code>$route</code>  的直接依赖：</p>
  <pre v-highlight><code class="javascript">&lt;script setup lang="ts"&gt;
import {useRoute} from "vue-router";
import {ref} from "vue";
// const route = useRoute();
// const id = ref(route.params.id);
defineProps({
  id: String
});
&lt;/script&gt;
&lt;template&gt;
  &lt;p&gt;id：{{ id }}&lt;/p&gt;
&lt;/template&gt;</code></pre>
  <p>第二步：我们可以通过设置 <code>props: true</code> 来配置路由将 <code>id</code> 参数作为<code>prop</code> 传递给组件：</p>
  <pre v-highlight><code class="javascript">{
    path: 'passing-props/:id',
    name: '传递Props',
    component: RouterProps,
    props: true,//开启props
},</code></pre>

  <p>当 <code>props</code>  设置为 <code>true</code>  时， <code>route.params</code> 将被设置为组件的 <code>props</code>。</p>

  <el-card header="命名视图" class="mb-4">
  <p>对于有命名视图的路由，你必须为每个命名视图定义 <code>props</code> 配置：</p>
    <pre v-highlight><code class="javascript">const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]</code></pre>
  </el-card>
  <el-card header="对象模式" class="mb-4">
    <p>当 <code>props</code> 是一个对象时，它将原样设置为组件 <code>props</code>。当 <code>props</code> 是静态的时候很有用。</p>
    <pre v-highlight><code class="javascript">{
    path: 'passing-props/:id',
    name: '传递Props',
    component: RouterProps,
    // props: true,//开启props
    props:{
        id:1799,
    },
},</code></pre>
  </el-card>

  <el-card header="函数模式">
    你可以创建一个返回 <code>props</code> 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。
    <pre v-highlight><code class="javascript">{
path: 'passing-props/:id',
name: '传递Props',
component: RouterProps,
props: route => {
    console.log(route);
    return {
      id: Math.random().toString(16).slice(2, 5)
    }
  }
},</code></pre>
  </el-card>

  <el-card header="RouterView模式">
    <p>你还可以通过 <code>&lt;RouterView&gt;</code> 插槽 传递任意参数：</p>
    <pre v-highlight><code class="javascript">&lt;RouterView v-slot="{ Component }"&gt;
  &lt;component
    :is="Component"
    view-prop="value"
   /&gt;
&lt;/RouterView&gt;</code></pre>
  </el-card>

</template>

<style scoped>

</style>